<template>

    <div class="page flex unified-flex-align unified-flex-center">

        <!-- 未绑定界面 -->
        <div class="bind flex unified-flex-center" v-if="mode==0">

            <p class="binded-title">绑定手机号</p>

            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="grid-content bg-purple">
                        <el-input v-model="mobile" :disabled="sumbitDisabled"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" :disabled="sumbitDisabled" @click="clickGetMobileCode">{{sumbitText}}
                        </el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="grid-content bg-purple">
                        <el-input v-model="code"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button type="button" :disabled="getCodeBtnDisabled" @click="clickCheckMobileCode">提交验证
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 已绑定界面 -->
        <div class="binded" v-if="mode==1">

            <p class="binded-title">已绑定手机号</p>

            <p class="binded-mobile">{{editUserInfo.mobile | phoneShow}}</p>

            <p class="binded-time">绑定时间：20点19分</p>

            <p class="binded-tips">一个手机号只能绑定一个用户</p>
            <div class="binded-option">
                <el-button type="primary" @click="clickChangeMobile">更换手机号</el-button>
                <el-button type="danger" @click="closeMobileLogin">关闭手机号登录</el-button>
            </div>
        </div>
        <!-- 更换手机 -->
        <div class="change flex unified-flex-align unified-flex-center" v-if="mode==2">

            <!-- 解除原来 -->
            <div class="bind flex unified-flex-center">

                <p class="binded-title">解除原手机</p>

                <el-row :gutter="20">
                    <el-col :span="18">
                        <div class="grid-content bg-purple">
                            <el-input v-model="mobile" :disabled="sumbitDisabled"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" :disabled="sumbitDisabled" @click="clickGetMobileCode">
                                {{sumbitText}}
                            </el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="18">
                        <div class="grid-content bg-purple">
                            <el-input v-model="code"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-button type="button" :disabled="getCodeBtnDisabled" @click="clickCheckMobileCode">提交验证
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

        </div>



    </div>


</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        computed: {
            ...mapState(['editUserInfo']),
        },
        mounted() {
            if (this.editUserInfo.mobile) {
                this.mode = 1
                this.mobile = this.editUserInfo.mobile
            } else if (this.editUserInfo.mobile) {
                this.mode = 0
            }
        },

        watch: {
            mobile(newVal) {
                if (newVal.length == 11) {
                    this.getCodeBtnDisabled = false
                } else {
                    this.getCodeBtnDisabled = true
                }
            }
        },

        data() {
            return {
                // 页面模式
                mode: 0, // 0绑定  1已绑定  2更换绑定
                // 验证码文本
                code: "",
                // 手机号码
                mobile: "",
                // 获取验证码按钮禁止状态
                sumbitDisabled: false,
                // 获取验证码间隔
                sumbitInterval: 60,
                // 获取验证码按钮文本呢
                sumbitText: "获取验证码",
                // 更换手机号
                changeMobile: false,
                // 获取验证码按钮禁止状态
                getCodeBtnDisabled: true

            }
        },
        methods: {
            // 校验验证码
            clickCheckMobileCode() {
                this.$axios({
                    url: this.$api.user,
                    method: "POST",
                    data: {
                        action: "checkMobileCode",
                        params: {
                            mobile: this.mobile, // 发送的手机号
                            user: this.editUserInfo._id, // 用户的_id
                            effect: 2, // 此验证码的用途  0 登录  1 注册  2绑定  3解绑
                            code: this.code // 验证码
                        }
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.$message.success(res.data.msg)
                        this.$store.state.editUserInfo.mobile = this.mobile
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            clickGetMobileCode() {
                if (this.mobile.length != 11) {
                    this.$message.error("手机号码格式不正确")
                } else {
                    this.$axios({
                        url: this.$api.user,
                        method: "POST",
                        data: {
                            action: "getMobileCode",
                            params: {
                                mobile: this.mobile, // 发送的手机号
                                user: this.editUserInfo._id, // 用户的_id
                                effect: 2 // 此验证码的用途  0 登录  1 注册  2绑定  3解绑
                            }
                        }
                    }).then(res => {

                        if (res.data.code == 0) {

                            this.$message.success(res.data.msg)

                            this.sumbitDisabled = true
                            let timeINal = setInterval(() => {
                                if (this.sumbitInterval <= 0) {
                                    this.sumbitDisabled = false
                                    this.sumbitText = "获取验证码"
                                    // 清除定时器
                                    clearInterval(timeINal)
                                } else {
                                    this.sumbitInterval--
                                    this.sumbitText = "重新获取（" + this.sumbitInterval + ")"
                                }
                            }, 1000)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                }




            },
            clickChangeMobile() {
                this.$confirm('更换将导致原手机号不可登录, 请问是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return this.$axios({
                        url: this.$api.user,
                        method: "POST",
                        data: {
                            action: "getMobileCode",
                            params: {
                                mobile: this.mobile, // 发送的手机号
                                user: this.editUserInfo._id, // 用户的_id
                                effect: 3 // 此验证码的用途  0 登录  1 注册  2绑定  3解绑
                            }
                        }
                    })
                }).then(res=>{
                    // 如果请求验证码成功了才将页面切换到解绑手机
                    if(res.data.code==0){
                        this.mode = 2
                        this.$message.success(res.data.msg)
                    }else{
                        this.$message.error(res.data.msg)
                    }
                }).catch(()=>{
                })
            },
            // 发送解绑手机
            clickRelieveMobile() {
                this.$axios({
                    url: this.$api.user,
                    method: "POST",
                    data: {
                        action: "getMobileCode",
                        params: {
                            mobile: this.mobile, // 发送的手机号
                            user: this.editUserInfo._id, // 用户的_id
                            effect: 3 // 此验证码的用途  0 登录  1 注册  2绑定  3解绑
                        }
                    }
                }).then(res => {
                    console.log(res.data);
                })
            },
            closeMobileLogin(){
                
                console.log('点击了关闭手机号登录');
                
            }
        }

    }
</script>

<style scoped="scoped">
    .binded,
    .bind,
    .change {
        height: 100%;
    }

    .change {
        width: 100%;
    }

    .bind {
        width: 70%;
        height: 50%;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }


    .binded {
        width: 100%;
        padding: 30px;
        padding-left: 40px;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .binded-title {
        font-size: 20px;
        font-weight: bold;
    }

    .binded-mobile {
        margin-top: 10px;
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .binded-time,
    .binded-tips {
        margin-top: 10px;
        font-size: 10px;
        font-weight: bold;
        color: #777777;
        letter-spacing: 1px;
    }

    .binded-option {
        margin-top: 15px;
    }
</style>
